<template>
	<view class="user-info-page">
		<view class="top">
			<!-- <headerBar></headerBar> -->
			<view class="card">
				<view class="explain">
					v10客户<i class="iconfont icon_moly_and_jun_bangzhu_o"></i>
				</view>
				<view class="info">
					<view class="img">
						<image :src="userinfo.avatarUrl||'../../static/img/header.jpg'" lazy-load></image>
					</view>
					<view class="client">
						<view class="phone">
							{{userinfo.nickName?userinfo.nickName:'nickName'}}
						</view>
						<view class="num" v-show="userinfo.nickName">
							{{userinfo.city}}
						</view>
					</view>
				</view>
				<view class="introduce" v-show="userinfo.nickName">
					<p>尊敬的茉莉美，今天是您在家的第{{date}}天。</p>
					<p>{{verse.name}}--{{verse.from}}</p>
				</view>
				<div class="login" @click='login' v-show="!userinfo.nickName">
					授权享受更多权益
				</div>
			</view>
		</view>
		<view class="enjoy">
			<view class="left"></view>
			尊享9项权益
			<view class="right"></view>
		</view>
		<view class="enjoyContent">
			<view class="list">
				<view class="title">
					咨询权益
				</view>
				<view class="item">
					<navigator :url="item.url" class="item_enjoy" v-for="(item,index) in list" :key='index'>
						<view class="icon_item">
							<i class="iconfont icon_moly_and_jun_bangzhu_o"></i>
						</view>
						<view class="text_item">
							{{item.title}}
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerBar from '../../components/headerBar.vue'
	import {
		getLogin,
		getUserInfo,getVerse
	} from '@/api/index.js'
	export default {
		components: {
			headerBar
		},
		data() {
			return {
				list: [{
						title: '星座解析',
						url: '/pages/constellation/constellation'
					},
					{
						title: '周公解梦',
						url: '/pages/constellation/constellation'
					},
				],
				userinfo: {},
				date:0,
				verse:''
			}
		},
		onLoad() {
			let token = uni.getStorageSync('token') || ''
			if (!token) {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						getLogin({
							js_code: res.code
						}).then(res => {
							this.userinfo = res.data.data
							this.date=this.setDate(this.userinfo.date)
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('userinfo', res.data.data);
						})
					}
				})
			}else{
				let userinfo = uni.getStorageSync('userinfo') || {}
				this.userinfo=userinfo
				this.date=this.setDate(userinfo.date)
			}
			getVerse().then(res=>{
				this.verse=res.data.list
			})
		},
		methods: {
			login() {
				uni.getUserProfile({
					desc: '展示',
					success: (res) => {
						this.userinfo = res.userInfo
						uni.setStorageSync('userinfo', res.userInfo);
						getUserInfo(res.userInfo).then()
					}
				})
			},
			setDate(date){
				var start=date;//2017-4-10 10:00
				var end=new Date().getTime();//2017-5-10 10:00
				var utc=end-start;
				return Math.ceil(utc/(24*60*60*1000));
			}
		},
	}
</script>

<style lang="less" scoped>
	.user-info-page {
		width: 100%;

		.top {
			position: relative;
			width: 100%;
			height: 300upx;
			background-color: #2e2e30;
			border-radius: 0 0 15% 15%;

			.card {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 300upx;
				width: 690upx;
				color: #40495a;
				padding: 30upx;
				margin-top: 50upx;
				background: url('http://qz4ahdlo0.hn-bkt.clouddn.com/bg.png') no-repeat;
				background-size: 100%;
				border-radius: 10upx;
				box-sizing: border-box;

				.login {
					width: 360upx;
					height: 80upx;
					background-color: #68728c;
					border-radius: 80upx;
					line-height: 80upx;
					text-align: center;
					color: #fff;
					margin: 0 auto;
				}

				.explain {
					display: flex;
					justify-content: center;
					position: absolute;
					right: 0upx;
					top: 0;
					height: 50upx;
					line-height: 50upx;
					font-size: 24upx;
					width: 140upx;

					/deep/.icon_moly_and_jun_bangzhu_o {
						font-size: 40upx;
					}
				}

				.info {
					display: flex;

					.img {
						position: relative;
						width: 100upx;
						height: 100upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 50%;
						}

						.vip {
							position: absolute;
							right: -12upx;
							bottom: 6upx;
							width: 30upx;
							height: 30upx;
							line-height: 30upx;
							font-size: 20upx;
							text-align: center;
							font-family: -webkit-pictograph;
							color: #7d8caf;
							background-image: linear-gradient(#fcf4e7, #8b96af);
							border-radius: 50%;
						}
					}

					.client {
						margin-left: 34upx;
						font-size: 30upx;
						line-height: 50upx;
					}
				}

				.introduce {
					margin-top: 30upx;
					font-size: 26upx;
					line-height: 1.6;
				}
			}
		}

		.enjoy {
			display: flex;
			margin-top: 100upx;
			color: #8f8f8f;
			font-size: 20upx;
			justify-content: center;
			align-items: center;

			view {
				width: 200upx;
				height: 2upx;
			}

			.left {
				margin-right: 15upx;
				background-image: linear-gradient(to right, #fff, #8b96af);
			}

			.right {
				margin-left: 15upx;
				background-image: linear-gradient(to left, #fff, #8b96af);
			}
		}

		.enjoyContent {
			margin-top: 40upx;
			padding: 0 40upx;

			.list {
				padding-top: 50upx;
			}

			.title {
				font-size: 30upx;
				font-weight: bold;
			}

			.item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				font-size: 24upx;

				.item_enjoy {
					flex: 1;
					width: 25%;
					min-width: 25%;
					max-width: 25%;
					margin-top: 30upx;
					text-align: center;

					.icon_item {
						width: 90upx;
						height: 90upx;
						line-height: 90upx;
						margin: 0 auto;
						background-color: #eaecf8;
						border-radius: 50%;

						/deep/.iconfont {
							font-size: 70upx;
						}
					}
				}

				.text_item {
					margin-top: 10upx;
				}
			}
		}
	}
</style>
